@import '../../styles/index';
@import '../../styles/mixins';
@import '../../styles/badges';

.bottom-nav {
  margin-bottom: 10px !important;
  justify-self: flex-end;
  border-right: 0px !important;
  border-top: 2px solid var(--nav-divider);

  :global(div.ant-menu-submenu-title) {
    padding-left: 16px !important;
  }

  &.closed {
    border-top: 0px;

    :global(.ant-menu-item-icon) {
      i:not(.link-badge) {
        font-size: 14px;
      }
    }

    :global(.ant-menu-item:hover),
    :global(.ant-menu-submenu:hover) {
      i:not(.link-badge),
      span {
        transition: all 0.2s ease-in-out;
        transform: scale(1.2, 1.2);
        overflow: visible;
      }

      i.link-badge {
        position: absolute;
        top: 0;
        right: 0;
        transition: all 0.2s ease-in-out;
        transform: translate(53%, -53%);
        transform-origin: 100% 0%;
      }
    }

    :global(span.ant-menu-title-content) {
      display: none !important;
    }

    :global(i.ant-menu-submenu-arrow) {
      display: none !important;
    }

    :global(.ant-menu-submenu-vertical .ant-menu-submenu-popup) {
      display: none !important;
    }

    :global(li.ant-menu-item),
    :global(div.ant-menu-submenu-title) {
      align-items: center;
      display: flex;
      overflow: visible;
    }

    :global(div.ant-menu.ant-menu-sub.ant-menu-inline),
    :global(span.ant-menu-title-content) {
      visibility: hidden;
      opacity: 0;
    }
  }

  &.open {
    :global(li.ant-menu-item),
    :global(li.ant-menu-submenu) {
      overflow: unset !important;
      text-overflow: unset !important;
      overflow-wrap: break-word !important;
      padding-bottom: 0px;
      white-space: normal !important;
    }

    :global(div.ant-menu.ant-menu-sub.ant-menu-inline),
    :global(span.ant-menu-title-content) {
      visibility: visible;
      overflow: visible;
      opacity: 1;
      transition: visibility 0s, opacity 0.5s linear;
    }
  }
}

.link-badge {
  transform: scale(1.2, 1.2);
  margin: auto;
  display: block;
  border: 1px solid var(--section-alt);
  font-size: 8px;
}

.divider {
  margin: 0 !important;
  border: none !important;
  height: 2px !important;
  background-color: var(--nav-divider) !important;
  border-top: 2px solid var(--nav-divider);
}

.login-divider:extend(.divider) {
  margin: 8px 15px 0 15px !important;
  width: auto !important;
  min-width: auto !important;
}

.login {
  padding-top: 10px !important;
  :global(.ant-menu-item.ant-menu-item-only-child) {
    margin-bottom: 10px;
  }

  &::before {
    content: '';
    margin: 0 10px;
    width: calc(100% - 20px);
    height: 2px;
    background: var(--nav-divider);
    display: block;
    left: 0;
    top: 0;
    position: absolute;
  }

  &.login-closed::before {
    width: 30px;
  }

  .platform-logo {
    margin-right: 10px;

    &-twitch {
      color: var(--twitch) !important;
    }
    &-youtube {
      color: var(--youtube) !important;
    }
    &-facebook {
      color: var(--facebook) !important;
    }
    &-trovo {
      width: 15px;
      height: 15px;
    }
    &-tiktok {
      color: var(--tiktok) !important;
    }
    &-streamlabs {
      color: var(--teal) !important;
    }
    &-default {
      color: var(--logged-in) !important;
    }
  }

  .username {
    margin-bottom: 0px;
    flex-grow: 1;
    line-height: 20px;
    margin: 2px 0 0 0;
  }

  .login-arrow {
    justify-self: flex-end;
    margin-left: 5px;
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transition: all 0.2s ease-in-out;
  }

  > span {
    display: flex;
    flex-direction: row;
    align-items: center;

    &:hover {
      color: var(--title);
      i:not(.platform-logo) {
        transform: scale(1.2, 1.2);
        transition: all 0.4s ease;
      }
    }
  }
}

.logged-out {
  margin-bottom: 0px;
  flex-grow: 1;
  text-decoration: underline !important;
}

.confirm-logout {
  position: relative;
  z-index: 1002; // show above resize bars
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 80%;

  h2 {
    align-self: flex-start;
  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 15px;
    width: 100%;

    button:not(:last-child) {
      margin-right: 5px;
    }
  }
}
